<template>
  <div class="status-panel"
    :style="{ height: props.height, background: props.background }">
    <div class="status-info">
      <div class="text">{{ props.status }}</div>
      <div class="count">{{ props.count }}</div>
    </div>
    <div class="percent-ring">
      <el-progress
        :class="props.trackClass"
        type="circle"
        :color="props.circleColor"
        :width="110"
        :stroke-width="props.strokeWidth"
        :percentage="parseFloat(props.percent)"
      >
        <template #default="{ percentage }">
          <span class="percent-text">{{ percentage }}%</span>
        </template>
      </el-progress>
      <!-- <div class="color-ring" :style="{ border: props.circleBorder }"></div>
      <div class="percent-text">{{ props.percent }}%</div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Progress',
  inheritAttrs: false,
})

const props = defineProps({
  trackClass: {
    type: String,
    default: 'blue'
  },
  background: {
    type: String,
    default: ''
  },
  circleBorder: {
    type: String,
    default: ''
  },
  circleColor: {
    type: String,
    default: '#0C9AE8'
  },
  height: {
    type: String,
    default: '137px'
  },
  strokeWidth: {
    type: Number,
    default: 9
  },
  // 填报状态
  status: {
    type: String,
    default: '已填报'
  },
  // 进度百分比
  percent: {
    type: [Number, String],
    default: ''
  },
  // 数量
  count: {
    type: [Number, String],
    default: 0
  },
});

const statusList = ref<Record<string, any>>([
  { status: '已填报', percent: 80, number: 123 },
  { status: '未填报', percent: 30, number: 45 },
  { status: '通过', percent: 60, number: 78 },
  { status: '驳回', percent: 20, number: 9 },
  { status: '待审核', percent: 50, number: 32 }
]);

const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    '已填报': '#409EFF',
    '未填报': '#67C23A',
    '通过': '#409EFF',
    '驳回': '#F56C6C',
    '待审核': '#E6A23C'
  };
  return colorMap[status];
};

// 模拟数据动态更新
onMounted(() => {
  const timer = setInterval(() => {
    statusList.value = statusList.value.map((item: any) => ({
      ...item,
      percent: Math.min(item.percent + Math.random() * 10, 100)
    }));
  }, 2000);
  
  return () => clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.status-panel {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-radius: 12px;
}
.status-info{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.text{
  color: white;
  font-size: 16px;
  font-weight: 600;
}
.count{
  margin-top: 12px;
  color: white;
  font-size: 24px;
  font-weight: 600;
}
.percent-ring{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.color-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  transition: all 0.3s ease;
  // animation: rotate1 8s linear infinite;
}
.percent-text{
  font-size: 18px;
  font-weight: 600;
  color: rgb(238,248,254, 0.8);
  font-size: 18px;
}
.blue{
  :deep(.el-progress-circle__track){
    stroke: rgba(190,218,233, 0.8);
  }
}
.red{
  :deep(.el-progress-circle__track){
    stroke: rgba(249,157,158, 0.8);
  }
}
.green{
  :deep(.el-progress-circle__track){
    stroke: rgba(173,241,237);
  }
}
// .color-ring::before {
//   content: '';
//   position: absolute;
//   border-radius: 50%;
//   border: 20px solid transparent;
//   border-top-color: #ff0000;
//   border-left-color: #00ff00;
//   border-bottom-color: #0000ff;
//   border-right-color: #ff00ff;
// }

@keyframes rotate1 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>